/* Hide scrollbar for webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for Firefox */
html {
    scrollbar-width: none;
}

/* Hide scrollbar for all elements while maintaining scroll functionality */
* {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

*::-webkit-scrollbar {
    display: none;
}

.questionAppearAnimation {
    animation: zoomIn 0.35s ease-out forwards;
    transform-origin: top left;
    transform: scaleY(0);
    opacity: 0;
    animation-delay: 1s;
}

.obstacleQuestionAppearAnimation {
    animation: zoomIn 0.35s ease-out forwards;
    transform-origin: top left;
    transform: scaleY(0);
    opacity: 0;
    animation-delay: 0s;
}



.leftName {
    animation: zoomIn 0.35s ease-out forwards;
    transform-origin: bottom left;
    transform: scaleY(0);
    opacity: 0;
}

.leftAnswer {
    animation: zoomIn 0.35s ease-out forwards;
    transform-origin: top left;
    transform: scaleY(0);
    opacity: 0;
}

.rightName {
    animation: zoomIn 0.35s ease-out forwards;
    transform-origin: bottom right;
    transform: scaleY(0);
    opacity: 0;
}

.rightAnswer {
    animation: zoomIn 0.35s ease-out forwards;
    transform-origin: top right;
    transform: scaleY(0);
    opacity: 0;
}

.obstacleAnswerRow {
    animation: slideInScale 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    transform: translateX(-16px) scale(0.96);
    opacity: 0;
}

.accelerationAnswerRow {
    animation: slideUpBounce 0.25s ease-out forwards;
    transform: translateY(50px);
    opacity: 0;
}

.verticalLineAppear {
    animation: wipeDown 0.5s ease-out forwards;
    transform-origin: top;
    transform: scaleY(0);
    opacity: 0;
    animation-delay: 0.5s;
}


@keyframes wipeDown {
    0% {
        transform: scaleY(0);
        opacity: 0;
    }

    100% {
        transform: scaleY(1);
        opacity: 1;
    }
}

@keyframes zoomIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes slideInScale {
    0% {
        transform: translateX(-50px) scale(0.9);
        opacity: 0;
    }

    100% {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}

@keyframes slideUpBounce {
    0% {
        transform: translateY(50px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}


.accelerationAppearAnimation {
    animation: zoomIn 0.3s ease-out forwards;
    transform-origin: center left;
    transform: scaleY(0);
    opacity: 0;
    animation-delay: 0.5s;
}

.opacityAnimation {
    animation: fadeIn 0.25s ease-out forwards;
    animation-delay: 1.5s;
    opacity: 0;
}

.obstacleOpacityAnimation {
    animation-delay: 0.75s;
}


@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* Fly In Animation */
@keyframes flyIn {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Fly Out Animation */
@keyframes flyOut {
    0% {
        transform: translateX(0);
        opacity: 1;
    }

    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Apply fly-in animation */
.fly-in {
    opacity: 0;
    animation: flyIn 0.25s ease-out forwards;
}

/* Apply fly-out animation */
.fly-out {
    opacity: 0;
    animation: flyOut 0.5s ease-in forwards;
}


.startQuestionAppearAnimation {
    animation: zoomIn 0.4s ease-out forwards;
    transform-origin: top left;
    transform: scaleY(0);
    opacity: 0;
    animation-delay: 0.5s;
}

.questionNumberAppearAnimation {
    animation: zoomIn 0.35s ease-out forwards;
    transform-origin: top left;
    transform: scaleY(0);
    opacity: 0;
    animation-delay: 0.75s;
}

.startPlayerListAppearAnimation {
    animation: flyInUp 0.45s ease-out forwards;
    transform: translateY(50%);
    opacity: 0;
    animation-delay: 0.55s;
}

@keyframes flyInUp {
    0% {
        transform: translateY(50%);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.finishQuestionAppearAnimation {
    animation: zoomIn 0.4s ease-out forwards;
    transform-origin: top left;
    transform: scaleY(0);
    opacity: 0;
    animation-delay: 0.65s;
}

@keyframes flyInRight {
    0% {
        transform: translateX(-50%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }

    25% {
        background-position: 50% 60%;
    }

    50% {
        background-position: 100% 50%;
    }

    75% {
        background-position: 50% 40%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.animate-gradient {
    background: linear-gradient(-45deg, #1e293b, #1e40af, #1e3a8a);
    background-size: 400% 400%;
    animation: gradientMove 6s ease-in-out infinite;
}

.shimmer-animation {
    position: relative;
    overflow: hidden;
}

.shimmer-animation::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: translateX(-100%);
    animation: shimmer 1.5s forwards;
    animation-delay: 0.75s;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}


.elegantZoomIn {
    animation: elegantZoom 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    transform: scale(0.8);
    opacity: 0;
}

@keyframes elegantZoom {
    0% {
        transform: scale(0.8);
        opacity: 0;
        filter: blur(4px);
    }

    60% {
        transform: scale(1.02);
        opacity: 0.8;
        filter: blur(1px);
    }

    100% {
        transform: scale(1);
        opacity: 1;
        filter: blur(0);
    }
}

/* 
.entranceAnimation {
    animation: entrance 1.5s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
  }

  @keyframes entrance {
    0% {
      opacity: 0;
      transform: translateY(100px) scale(0.7) rotate(10deg);
    }
    60% {
      opacity: 1;
      transform: translateY(-20px) scale(1.05) rotate(-2deg);
    }
    80% {
      transform: translateY(10px) scale(0.95) rotate(1deg);
    }
    100% {
      opacity: 1;
      transform: translateY(0) scale(1) rotate(0deg);
    }
  } */